<template>
  <div class="login">
    <nav-bar class="home-nav">
      <div slot="center">登录</div>
    </nav-bar>
    <div class="login_main">
      <img class="login_bg" src="@/assets/images/login_bg.png"/>
      <div class="login_form">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="username"
            label="账号"
            left-icon="user-o"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            name="password"
            clearable
            type="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          >
            <template #left-icon>
              <van-icon name="mima" class="iconfont" class-prefix='icon' size="20"/>
            </template>
          </van-field>

          <div class="login_btn">
            <van-button round block type="info" native-type="submit" color="#1692f2">
              登录
            </van-button>
          </div>

        </van-form>
      </div>

    </div>
  </div>
</template>

<script>
  import Util from "@/common/util";
  import NavBar from "@/components/common/navbar/NavBar";

  export default {
    name: "login",
    components: {
      NavBar
    },

    data() {
      return {
        username: '',
        password: '',
      }
    },

    created() {
      let userinfo = Util.storage.get('userinfo')
      console.log(userinfo)

    },

    methods: {
      onSubmit(values) {
        let that = this;
        console.log('submit', values);
        that.$http.post('/api/MobileAadminApi/login', values, r => {
          console.log('登录结果',r)
          if(r.code == 1) {
            Util.storage.set('userinfo',r.data)
            Util.storage.set('base_id',r.data.base_id)
            Util.storage.set('syuid',r.data.id)
            that.$toast.loading({
              message: '登录中...',
              forbidClick: true,
              loadingType: 'spinner',
            });
            that.$router.push('/index');
            that.$toast.clear()
          }
        },
        e => {
          console.log('登陆失败',e)
          that.$toast(e.info)
        }
        )
      },
    },
  }
</script>

<style scoped>
  .login {
    padding-top: .9rem;
    height: 100vh;
    background: #fff;
  }

  .login_bg {
    width: 100%;
  }

  .login_form {
    margin-top: 30px;
  }

  .login_btn {
    margin: 30px 15px;
  }

  .login_btn >>> .van-button--normal {
    font-size: .36rem;
  }
  .login_form >>> .van-icon-user-o{
    font-size: 19px;
  }
  .login_form >>>  .van-field__error-message{
    display: none;
  }
</style>
